<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-row type="flex">
          <el-col>
            <el-form-item prop="name">
              <el-input v-model="queryParams.name" @keyup.enter.native="handleQuery"
                        placeholder="云信用户:请输入云信用户"></el-input>
            </el-form-item>
          </el-col>
          
          <el-col>
            <el-form-item prop="accid">
              <el-input v-model="queryParams.accid" @keyup.enter.native="handleQuery"
                        placeholder="云信账号:请输入云信账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <div class="table-btn">
        <div class="table-btn-item" @click="getList">
          <img src="@/assets/images/refresh.png" title="刷新"/>
        </div>
        <div class="table-btn-item" title="重置" @click="resetQuery">
          <img src="@/assets/images/search.png"/>
        </div>
      </div>
    </el-card>
    
    <!--功能-->
    <div class="funcs">
      <div class="funcs-title">App升级配置</div>
      <div class="funcs-btns">
        <el-button type="primary" @click.native="handleAdd">新增</el-button>
      </div>
    </div>
    
    <div class="section">
      <el-table v-loading="tableLoading" :data="data" stripe>
        <el-table-column align="center" type="selection" width="70"/>
        <el-table-column label="云信注册信息" align="center" prop="sysChat"/>
        <el-table-column label="云信注册用户" align="center" prop="name"/>
        <el-table-column label="云信账号" align="center" prop="accid"/>
        <el-table-column label="云信token" align="center" prop="token" min-width="150"/>
        <el-table-column label="用户账号" align="center" prop="sysUserName"/>
        <el-table-column fixed="right" label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleRefresh(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">刷新 </span>
            </el-button>
            
            <!--<el-dropdown trigger="click" @command="handleCommand">-->
            <!--  <span style="color: #535AF4;">-->
            <!--    更多菜单<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
            <!--  </span>-->
            <!--  <el-dropdown-menu slot="dropdown">-->
            <!--    <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>-->
            <!--    <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>-->
            <!--    <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>-->
            <!--    <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>-->
            <!--    <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>-->
            <!--  </el-dropdown-menu>-->
            <!--</el-dropdown>-->
          </template>
        </el-table-column>
      </el-table>
      
      <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                  class="pagination" @pagination="getList('')"/>
    </div>
    
    <!--新增 修改-->
    <edit ref="editRef" :title="title"></edit>
  
  </div>
</template>

<script>
    import {listChat, refreshTokenApi} from "@/api/system/chat.js";
    import edit from "./components/edit";

    export default {
        components: {edit},
        data() {
            return {
                title: '',
                data: [],
                total: 0,
                tableLoading: false,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: '',
                    accid: ''
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            // 添加
            handleAdd() {
                this.title = '新增';
                this.$refs.editRef.open();
            },

            // 更多菜单命令
            handleCommand() {
            },


            // 刷新网易云信token
            handleRefresh(row) {
                this.tableLoading = true;
                refreshTokenApi(row.sysChat).then(res => {
                    this.tableLoading = false;
                    this.$message.success('刷新成功！');
                    this.getList();
                }).catch(() => {
                    this.tableLoading = false;
                    this.$message.error('刷新失败！')
                })
            },


            /** 新增 确认提交 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.dictCode != null) {
                            updateData(this.form).then(response => {
                                this.$modal.msgSuccess("编辑成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addData(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },

            // 删除
            handleDelete(row) {
                this.resetQuery();
                delData(row.dictCode).then(response => {
                    this.$modal.msgSuccess("删除成功");
                    this.getList();
                })
            },

            // 查询列表
            getList() {
                this.tableLoading = true;
                listChat(this.queryParams).then(res => {
                    this.tableLoading = false
                    this.data = res.rows;
                    this.total = res.total;
                }).catch(() => {
                    this.tableLoading = false
                })
            },

            // 重置
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },

            // 查询
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            }
        }
    };
</script>
